<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->
<div [ngClass]="['ddp-ui-contents-det', 'ddp-padt20']">

  <div class="ddp-wrap-top-filtering">
    <!-- filter search -->
    <div class="ddp-filter-search ddp-fright">
      <div class="ddp-form-filter-search">
        <component-input
          [autoFocus]="false"
          [isEnableDelete]="true"
          [value]="searchKeyword"
          [placeHolder]="'msg.engine.monitoring.ph.datasource.search' | translate"
          [immediately]="true"
          (changeValue)="onChangedSearchKeyword($event)">
        </component-input>
      </div>
    </div>
    <!-- //filter search -->
    <!-- filters -->
    <component-criterion [criterionApiFunc]="criterionApiFunc"
                         (changedFilter)="onChangedFilter($event)">
    </component-criterion>
    <!-- //filters -->
  </div>

  <div class="ddp-data-source-none" *ngIf="isEmptyList(); else existList">
    {{'msg.comm.ui.no.rslt' | translate}}
  </div>

  <ng-template #existList>
  <table class="ddp-table-form ddp-table-type3">
    <colgroup>
      <col width="*">
      <col width="150px">
      <col width="250px">
      <col width="150px">
      <col width="150px">
      <col width="150px">
      <col width="100px">
    </colgroup>
    <thead>
      <tr>
        <th>
          Datasource name
        </th>
        <th>
          Status
        </th>
        <th>
          Time
        </th>
        <th>
          Size
        </th>
        <th>
          Available Segment
        </th>
        <th>
          Num of Rows
        </th>
        <th>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let datasource of datasourceList" (click)="onClickDatasource(datasource)">
        <td [innerHTML]="highlightSearchText( datasource.datasource, searchKeyword )">
        </td>
        <td>
          <span class="ddp-txt-status type-{{getDatasourceStatus(datasource)}}">{{getDatasourceStatusLabel(datasource)}}</span>
        </td>
        <td>
          {{notExistSegments(datasource) ? '' : (datasource.segments.minTime | date : 'yyyy-MM-ddTHH' : 'UTC') + ' ~ ' + (datasource.segments?.maxTime | date : 'yyyy-MM-ddTHH' : 'UTC')}}
        </td>
        <td>
          {{notExistSegments(datasource) ? '' : getDatasourceSize(datasource)}}
        </td>
        <td>
          {{datasource.disabled ? '' : datasource.num_available_segments | numberCommas}}
        </td>
        <td>
          {{datasource.disabled ? '' : datasource.num_rows | numberCommas}}
        </td>
        <td>
          <a href="javascript:" class="ddp-box-btn-able" (click)="$event.stopPropagation(); onClickConfirmDatasource(datasource, 'disable');" *ngIf="!datasource.disabled">
            <em class="ddp-icon-disable"></em>

            <!-- tooltip -->
            <div class="ddp-ui-tooltip-info ddp-top" >
              <em class="ddp-icon-view-top"></em>
              {{'msg.engine.monitoring.btn.ds.list.disable' | translate}}
            </div>
            <!-- //tooltip -->
          </a>
          <a href="javascript:" class="ddp-box-btn-able" (click)="$event.stopPropagation(); onClickConfirmDatasource(datasource, 'enable');" *ngIf="datasource.disabled">
            <em class="ddp-icon-enable"></em>
            <!-- tooltip -->
            <div class="ddp-ui-tooltip-info ddp-top" >
              <em class="ddp-icon-view-top"></em>
              {{'msg.engine.monitoring.btn.ds.enable' | translate}}
            </div>
            <!-- //tooltip -->
          </a>

          <div class="ddp-btn-control">
            <em class="ddp-icon-control-cut" (click)="$event.stopPropagation(); onClickConfirmDatasource(datasource, 'delete');"></em>
          </div>
        </td>
      </tr>
    </tbody>

  </table>
  <!-- Pagination -->
  <component-pagination [info]="pageResult" (changePageData)="changePage($event)"></component-pagination>
  <!-- // Pagination -->
  </ng-template>
</div>

<app-delete-modal (deleteConfirm)="confirmDatasource($event)"></app-delete-modal>
